<template>
  <a-card :bordered="false" style="height: calc(100vh - 305px)">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleShowFilter" icon="filter" style="margin-right: 10px">
        筛选 <span style="color: #1890ff; margin-left: 5px">{{ searchNum }}</span></a-button
      >
      <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
      <!-- <a-button @click="handleAdd" type="primary" style="float: right" icon="plus">新建</a-button> -->
    </div>
    <!-- 设置列 -->
    <SetColumn
      columnName="设置列"
      ref="SetColumn"
      v-if="showSetColumn"
      @sureBtn="sureBtn"
      @cancelBtn="showSetColumn = false"
    />
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :key="tableKey"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :scroll="{ x: computedX, y: 'calc(100vh - 420px)' }"
        :components="drag(columns, 'PRO_ORDER_LIST_ALREADY_LIST')"
      >
        <!-- title搜索条件开始 -->
        <!-- 输入框搜索 -->
        <template :slot="item.scopedSlots.filterDropdown" slot-scope="{ column }">
          <div v-for="(item, i) in filterDropdownList" :key="i" style="display: flex; padding: 8px">
            <a-input
              v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
              :placeholder="'请输入'[column.title]"
              v-model="queryParam[column.searchIndex]"
              style="width: 188px"
            />
            <a-select
              v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
              :mode="column.multi ? 'multiple' : 'default'"
              :placeholder="'请选择'[column.title]"
              allowClear
              style="width: 188px"
              v-model="queryParam[`${column.searchIndex}all`]"
              @change="(a) => changeSelect(a, column.searchIndex)"
              :labelInValue="true"
            >
              <a-select-option v-for="(items, i) in column.options" :key="i" :value="items.key">{{
                items.label
              }}</a-select-option>
            </a-select>
            <a-range-picker
              v-if="item.scopedSlots.filterDropdown === 'datePicker'"
              style="width: 350px"
              v-model="dateForm[column.searchIndex]"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              @change="(a, b) => onOk(a, b, column.searchIndex)"
              show-time
            />
            <j-select-user-by-dep
              v-if="item.scopedSlots.filterDropdown === 'selectPeople'"
              v-model="queryParam[`${column.searchIndex}username`]"
              :multi="column.multi"
              @changeRow="(a, b, c) => onChangeUser(b || {}, column.searchIndex)"
            ></j-select-user-by-dep>
            <a-button type="primary" style="width: 80px; margin-left: 20px" @click="searchQuery"> 搜索 </a-button>
          </div>
        </template>
        <a-icon
          slot="searchIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 底部分页 -->
    <div
      :style="{
        position: 'fixed',
        bottom: 0,
        right: 0,
        zIndex: 2,
        width: '100%',
        background: '#fff',
        padding: '24px',
      }"
    >
      <div style="display: inline-block; float: right">
        <a-pagination
          :total="ipagination.total"
          v-model="ipagination.current"
          :page-size-options="ipagination.pageSizeOptions"
          :page-size="ipagination.pageSize"
          @change="onChangePage"
          @showSizeChange="onChangePage"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <!-- 侧边筛选 -->
    <a-drawer
      width="500"
      height="100vh"
      :bodyStyle="{ background: '#f5f5f5', padding: '0' }"
      :closable="true"
      :visible="showFilter"
      @close="showFilter = false"
    >
      <formSearch ref="dataSearch" @searchDate="searchDate" />
    </a-drawer>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { tableMixin } from '@/mixins/tableMixin'
import tableDragResize from '@/mixins/tableDragResize'
import { columns, allColumn } from './columnb.js'
const actionArr = []
export default {
  mixins: [tableMixin, tableDragResize],
  components: {},
  data() {
    return {
      // 表头
      columns: columns,
      actionArr,
      allColumn: allColumn,
      url: {
        list: '/planmgt/erpProductOrder/list?status=1',
      },
      EntityName: this.BUSI_CONST.Entity.PRO_ORDER_LIST_ALREADY_LIST, //用于表头设计,值保证是唯一的即可
      tableKey: 1.9,
    }
  },
  computed: {},
  methods: {},
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import '~@/assets/less/public.less';
</style>
